<template>
  <div class="form-container">
    <el-input
      v-model="props.modelValue"
      @input="handleInput"
      placeholder="请输入手机号码"
    />
    <el-button
      plain
      class="ipn_btn"
      @click="handleOpenModal()"
      :disabled="disabled"
    >{{ btnText }}
    </el-button>
  </div>
  <div>
    <el-dialog
      v-model="dialogVisible_1"
      title="发送手机验证码"
      width="512px"
    >

      <el-input
        placeholder="请输入验证码"
        v-model="code"
      >
        <template #append>
          <el-image
            @click="update_validate_image"
            class="code-image"
            :src="validate_image_url"
          >
            <template #error>
              <el-text
                type="info"
                size="small"
              >点击刷新</el-text>
            </template>
          </el-image>
        </template>
      </el-input>

      <div class="btns">
        <el-button
          type="primary"
          @click="handleCoundDown"
        >发送验证码</el-button>
      </div>
    </el-dialog>
    <!-- 验证码弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogText"
      width="20%"
    >
      <span>欢迎参与AI Will综合素养挑战赛，
        您的动态验证为【<b>{{ codePhone }}</b>】，
        非本人操作请忽略，感谢您为科创事业添砖加瓦！
      </span>
    </el-dialog>
  </div>
</template>

<script  setup>
import { ElMessage } from "element-plus";
import { useValidateImage } from "@/hooks/useValidateImage"
import { sendCode } from '@/api/index'

const { validate_image_url, update_validate_image } = useValidateImage();
import { nextTick, ref } from "vue"
const props = defineProps({
  modelValue: {
    default: "",
    type: String
  }
})
const emit = defineEmits(["update:modelValue"])
const phoneReg = /^1[3|4|5|6|7|8|9][0-9]{9}$/
const handleInput = (value) => {
  emit("update:modelValue", value)
  if (!value) {
    disabled.value = true;
    return;
  }
  if (phoneReg.test(value)) {
    disabled.value = false;
  } else {
    disabled.value = true;
  }
}
// 60秒验证码
const btnText = ref('获取验证码')
const countdown = ref(60)
const disabled = ref(true)
const code = ref("")
const dialogVisible_1 = ref(false)
const dialogVisible = ref(false)
const dialogText = ref('手机验证码(测试阶段-流程使用) ')
const codePhone = ref("")
const handleOpenModal = () => {
  if (!props.modelValue) {
    ElMessage.error("请输入手机号码")
    disabled.value = true;
    nextTick(() => {
      update_validate_image()
    })
    return;
  }
  if (phoneReg.test(props.modelValue)) {
    disabled.value = false;
  } else {
    ElMessage.error("手机号码格式错误")
    disabled.value = true;
  }
  dialogVisible_1.value = true;
}
const handleCoundDown = async () => {
  const phone = props.modelValue;
  if (disabled.value) {
    return; // 如果按钮已禁用，则不执行任何操作
  }
  if (!code.value) {
    ElMessage.error("请输入验证码！")
    return;
  }

  let res = await handleSendCode(phone)
  if (!res.success) {
    return;
  }
  dialogVisible_1.value = false;
  let timer = setInterval(() => {
    if (countdown.value <= 0) {
      disabled.value = false
      btnText.value = '获取验证码'
      clearInterval(timer)
      countdown.value = 60
    } else {
      btnText.value = countdown.value + 's 后重试'
      countdown.value--
      disabled.value = true
    }
  }, 1000)
}
const handleSendCode = async (phone) => {

  let res = await sendCode({ phone, code: code.value })
  if (res.success) {
    dialogVisible.value = true
    codePhone.value = res.entity
    ElMessage.success(res.message)
  } else {
    ElMessage.error(res.message)
  }
  return res;
}
</script>

<style lang="scss" scoped>
.form-container {
  display: flex;
  width: 512px;
}
.btns {
  width: 100%;
  padding-top: 32px;
  display: flex;
  justify-content: center;
}
</style>